<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
      </div>

      <div style="margin-top: 15px">
        <el-form
            :inline="true"
            :model="saerchcourierId"
            size="medium"
            label-width="150px"
        >
          <el-form-item label="快递单号:">
            <el-input
                style="width: 300px"
                v-model="saerchcourierId.courierId"
                placeholder="请输入要快递单号"
                clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                style="float: right"
                @click="handleSearchList()"
                type="primary"
                size="small"
            >
              搜索
            </el-button>
            <el-button
                style="float: right; margin-right: 15px"
                @click="handleResetSearch()"
                size="small"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>

      </div>
    </el-card>


    <el-card style="margin-top: 15px" class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>

    <div style="margin-top: 15px" class="table-container">
      <el-table
          :data="CourierList"
          style="width: 100%"
          height="260px"
          v-loading="listLoading"
          border
      >
        <el-table-column
            type="selection"
            width="60"
            align="center"
        ></el-table-column>


        <el-table-column label="快递单号" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.courier.courierId }}</template>
        </el-table-column>
        <el-table-column label="收件人" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.courier.receiver.username }}</template>
        </el-table-column>
        <el-table-column label="收件人电话号码" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.courier.receiver.phone }}</template>
        </el-table-column>

        <el-table-column label="派送目的地址" width="200" align="center" >
          <template slot-scope="scope"><p v-if="scope.row.destNetWork === undefined">{{ scope.row.courier.receiver.address }}</p>
            <p v-else>{{ scope.row.destNetWork.area.city.province.name + scope.row.destNetWork.area.city.name + scope.row.destNetWork.area.name +scope.row.destNetWork.address }}</p>
          </template>
        </el-table-column>

        <el-table-column label="快递小哥" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.deliveryMan.name }}</template>
        </el-table-column>
        <el-table-column label="派送状态" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>

        <el-table-column fixed="right" label="详细信息" width="200" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="(allDialogVisible = true),
                  showallData(scope.$index)
              ">
              <!--                :disabled="id != scope.row.id"-->
              点击查看
            </el-button>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="状态编辑" width="150" align="center">
          <template slot-scope="scope" >
            <el-button
                v-if = " (scope.row.status == '派送完成') "
                size="mini"
                type="danger"
                @click="(statusEditDialogVisible = true),
                      showStatusData(scope.$index, scope.row)
                  "
                disabled
            >
              状态修改
            </el-button>

            <el-button
                v-else
                size="mini"
                type="danger"
                @click="(statusEditDialogVisible = true),
                      showStatusData(scope.$index, scope.row)
                  "
            >
              状态修改
            </el-button>
          </template>
        </el-table-column>


        <el-table-column fixed="right" label="重量编辑" width="150" align="center">
          <template slot-scope="scope">
            <el-button
                v-if = " (scope.row.courier.weight == 0) || (scope.row.courier.weight == '')"
                size="mini"
                type="danger"
                @click="(DialogVisible = true),
                  showData(scope.$index, scope.row)
              ">
              完善信息
            </el-button>

            <el-button
                v-else
                size="mini"
                type="danger"
                @click="(DialogVisible = true),
                  showData(scope.$index, scope.row)
              "
                disabled
            >
              完善信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :page-count="pageCunt"
      >
      </el-pagination>
    </div>

    <el-dialog
        title="快递订单状态编辑"
        :visible.sync="statusEditDialogVisible"
        width="60%"
    >
          <span>
            <el-card class="filter-container" shadow="never">
              <div style="margin-top: 15px">
                <el-form
                    :inline="true"
                    :model="editStatus"
                    size="small"
                    label-width="140px"
                >
                  <el-form-item label="快递单号:">
                    <el-input
                        style="width: 203px"
                        v-model="editStatus.courierId"
                        :disabled="true"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="快递状态:">
                    <el-select
                        v-model="editStatus.status"
                        style="width: 203px"
                        placeholder="请选择账号状态"
                        clearable
                    >
                      <el-option
                          v-for="(item, index) in statusOption"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </span>
      <span slot="footer" class="dialog-footer">
            <el-button @click="statusEditDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleEditStatus()"
            >确 定</el-button
            >
          </span>
    </el-dialog>



    <el-dialog
        title="完善顾客寄快递的信息-重量 "
        :visible.sync="DialogVisible"
        width="60%"
    >
          <span>
            <el-card class="filter-container" shadow="never">
              <div style="margin-top: 15px">
                <el-form
                    :inline="true"
                    :model="editWeight"
                    size="small"
                    label-width="140px"
                >
                  <el-form-item label="快递单号:">
                    <el-input
                        style="width: 203px"
                        v-model="editWeight.courierId"
                        :disabled="true"
                    >
                    </el-input>
                  </el-form-item>

                  <el-form-item label="重量:">
                                       <el-input
                                           style="width: 203px"
                                           v-model="editWeight.weight"

                                       >
                                         <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px;">千克</i>
                                       </el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </span>
      <span slot="footer" class="dialog-footer">
            <el-button @click="DialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleEditWeight()"
            >确 定</el-button
            >
          </span>
    </el-dialog>

    <el-dialog
        title="详细信息"
        :visible.sync="allDialogVisible"
        width="70%"
    >
                <span>
            <el-card class="filter-container" shadow="never">
              <div style="margin-top: 15px">
      <el-descriptions class="margin-top" direction="vertical" :column="3"  style="width: 800px" border>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label"><i class="el-icon-user"></i>快递单号</template>
          {{this.editMessage.courierId}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label"> <i class="el-icon-office-building"></i>寄件网点名</template>
          {{this.editMessage.snetname}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label"> <i class="el-icon-office-building"></i>寄件人地址</template>
          {{this.editMessage.sendaddress}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label"><i class="el-icon-mobile-phone"></i>寄件人电话</template>
          {{this.editMessage.sendphone}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label"> <i class="el-icon-office-building"></i>收件网点名</template>
          {{this.editMessage.rnetname}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label"> <i class="el-icon-office-building"></i>收件人地址</template>
          {{this.editMessage.receaddress}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label"><i class="el-icon-mobile-phone"></i>收件人电话</template>
          {{this.editMessage.recephone}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label">快递重量</template>
          {{this.editMessage.weight + "  kg"}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label">快递费</template>

          {{this.editMessage.price + "   元" }}

        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label">紧迫程度</template>
          {{this.editMessage.urgency}}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px">
          <template slot="label"><i class="el-icon-tickets">创建时间</i></template>
          {{this.editMessage.createTime}}
        </el-descriptions-item>


               </el-descriptions>
            </div>
              </el-card>
          </span>





      <!--          </el-card>-->
      <!--        </span>-->
      <span slot="footer" class="dialog-footer">
          <el-button @click="allDialogVisible = false">关闭</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>

import Cookie from "js-cookie";

export default {
  name: "courier",
  data() {
    return {
      saerchcourierId: {
        pageNum: "1",
        pageSize: "5",
        courierId: "",

      },


      editMessage:{
        courierId: "",
        snetname: "",
        sendaddress: "",
        sendphone:"",
        rnetname: "",
        receaddress: "",
        recephone: "",
        weight:"",
        price:"",
        urgency:"",
        createTime:"",

      },

      editStatus: {
        courierId: "",
        status: "",
      },

      editWeight:{
        courierId: "",
        weight: "",
      },



      allDialogVisible: false,
      DialogVisible: false,



      statusOption: [
        {
          value: "0",
          label: "等待派送",
        },
        {
          value: "1",
          label: "派送中",
        },
        {
          value: "2",
          label: "派送完成",
        },
        {
          value: "-1",
          label: "派送失败",
        },
      ],



      statusEditDialogVisible: false,
      pageCunt: 1,
      listLoading: false,
      CourierDate:[],

      CourierList: [ ],
    }
  },
  created() {
    this.getList();
  },
  methods: {

    getList() {
      console.log("1")
      this.listLoading = true;
      this.axios
          .get("/api/auth/deliveryman/courier/listCouriers", {
            params: this.saerchcourierId,
          })
          .then((response) => {
            console.log(response)
            if (response.data.code == "200") {
              this.CourierList = response.data.value.data;
              this.CourierList.forEach(function (item, index) {



                if (item.status == "-1") {
                  item.status = "派送失败";
                } else if (item.status == "0") {
                  item.status = "等待派送";
                } else if (item.status == "1") {
                  item.status = "派送中";
                } else if (item.status == "2") {
                  item.status = "派送完成";
                }

                // if(item.destNetWork.name == undefined){
                //   item.destNetWork.name = item.destNetWork.address;
                // }

              }); if (
                  response.data.value.total / 5 >
                  Number.parseInt(response.data.value.total / 5)
              ) {
                this.pageCunt =
                    Number.parseInt(response.data.value.total / 5) + 1;
              } else {
                this.pageCunt = Number.parseInt(response.data.value.total / 5);
              }
            }else {
              this.$message.error(response.data.message);
            }
            this.listLoading = false;
          })
          .catch((error) => {
            this.$message.error("无法获取数据");
            this.listLoading = false;
          });
    },

    handleResetSearch(){
      this.saerchcourierId={
        pageNum: "1",
        pageSize: "5",
        courierId: "",
      };
      this.getList();
    },

    showStatusData(index) {

      this.editStatus = this.CourierList[index];
      this.editStatus.courierId = this.CourierList[index].courier.courierId;

    },

    showallData(index){
      this.editMessage = this.CourierList[index];
      this.editMessage.courierId = this.CourierList[index].courier.courierId;
      this.editMessage.snetname =this.CourierList[index].courier.sender.network.name;
      this.editMessage.sendaddress = this.CourierList[index].courier.sender.address;
      this.editMessage.sendphone = this.CourierList[index].courier.sender.phone;
      this.editMessage.rnetname = this.CourierList[index].courier.receiver.network.name;
      this.editMessage.recephone = this.CourierList[index].courier.receiver.phone;
      this.editMessage.weight = this.CourierList[index].courier.weight;
      this.editMessage.price = this.CourierList[index].courier.price;
      // this.editMessage.urgency = this.CourierList[index].courier.urgency;
      if (this.CourierList[index].courier.urgency == 1){
        this.editMessage.urgency = "特快";
      }else{
        this.editMessage.urgency = "标快";
      }

      this.editMessage.createTime = this.CourierList[index].createTime;
      this.editMessage.receaddress =this.CourierList[index].courier.receiver.address;

    },

    showData(index){

      this.editWeight = this.CourierList[index];
      this.editWeight.courierId = this.CourierList[index].courier.courierId;
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
    },

    handleSearchList() {
      this.listLoading = true;
      this.axios
          .get("/api/auth/deliveryman/courier/detail", {
            params: this.saerchcourierId,
          })
          .then((response) => {
            console.log(response)
            if (response.data.code == "200") {
              this.CourierList = response.data.value.data;
              this.CourierList.forEach(function (item, index) {
                if (item.status == "-1") {
                  item.status = "派送失败";
                } else if (item.status == "0") {
                  item.status = "等待派送";
                } else if (item.status == "1") {
                  item.status = "派送中";
                } else if (item.status == "2") {
                  item.status = "派送成功";
                }

              }); if (
                  response.data.value.total / 5 >
                  Number.parseInt(response.data.value.total / 5)
              ) {
                this.pageCunt =
                    Number.parseInt(response.data.value.total / 5) + 1;
              } else {
                this.pageCunt = Number.parseInt(response.data.value.total / 5);
              }
            }else {
              this.$message.error(response.data.message);
            }
            this.listLoading = false;
          })
      this.getList();
    },

    handleEditStatus() {
      this.$confirm("请再次确认是否选择提交状态修改")
          .then((_) => {
            this.axios
                .post(
                    "/api/auth/deliveryman/courier/updateDeliveryStatus?courierId=" +
                    this.editStatus.courierId +
                    "&status=" +
                    this.editStatus.status
                )
                .then((response) => {
                  if (response.data.code == "200") {
                    this.$message({
                      message: "修改成功",
                      type: "success",
                    });
                    this.statusEditDialogVisible = false;
                    this.getList();
                  } else {
                    this.$message.error(response.data.message);
                  }
                })
                .catch((error) => {
                  this.$message.error("修改失败");
                });
          })
          .catch((_) => {});
    },

    handleEditWeight(){
      this.$confirm("请再次确认是否选择提交状态修改")
          .then((_) => {
            this.axios
                .post(
                    "/api/auth/deliveryman/courier/updateCourier?courierId=" +
                    this.editWeight.courierId +
                    "&weight=" +
                    this.editWeight.weight
                )
                .then((response) => {
                  if (response.data.code == "200") {
                    this.$message({
                      message: "修改成功",
                      type: "success",
                    });
                    this.DialogVisible = false;
                    this.getList();
                  } else {
                    this.$message.error(response.data.message);
                  }
                })
                .catch((error) => {
                  this.$message.error("修改失败");
                });
          })
          .catch((_) => {});
    },


    handleCurrentChange(val) {
      this.listLoading = true;
      this.saerchcourierId.pageNum = val;
      this.axios
          .get("/api/auth/deliveryman/courier/listCouriers", {
            params: this.saerchcourierId,
          })
          .then((response) => {
            console.log(response)
            if (response.data.code == "200") {
              this.CourierList = response.data.value.data;

              console.log(response.data.value.data)
              console.log(this.CourierList, '+++++')
              this.CourierList.forEach(function (item, index) {
                if (item.status == "-1") {
                  item.status = "派送失败";
                } else if (item.status == "0") {
                  item.status = "等待派送";
                } else if (item.status == "1") {
                  item.status = "派送中";
                } else if (item.status == "2") {
                  item.status = "派送成功";
                }

              });
              if (
                  response.data.value.total / 5 >
                  Number.parseInt(response.data.value.total / 5)
              ) {
                this.pageCunt =
                    Number.parseInt(response.data.value.total / 5) + 1;
              } else {
                this.pageCunt = Number.parseInt(response.data.value.total / 5);
              }
            } else {
              this.$message.error(response.data.message);
            }
            this.listLoading = false;
          })
          .catch((error) => {
            this.$message.error("无法获取数据");
            this.listLoading = false;
          });
    }
  },

};
</script>